<style scoped>
	.user-context {
		padding: 10px;
	}
	
	.user-header {
		height: 35px;
		background: #EEEEEE;
		border-right: 1px solid #eee;
	}
	
	.user-header span {
		line-height: 35px;
		margin-left: 10px;
		font-family: inherit;
		font-size: 14px;
		color: #1c2438;
		font-weight: 700;
	}
	
	.user-tree {
		padding: 10px;
		height: 700px;
		border: 1px solid #eee;
	}
	
	.user-tree .ivu-tree .ivu-tree-title {
		font-size: 14px;
	}
	
	.user-tree .ivu-tree .ivu-tree-arrow {
		font-size: 14px;
	}
	
	.user-name {
		margin: 0 15px;
		width: 200px;
	}
	
	.user-loginname {
		margin: 0 15px;
		width: 200px;
	}
	
	.user-search {
		width: 1344px;
	}
	
	.table-page {
		margin-top: -35px;
	}
	
	.user-table {
		padding-top: 10px;
	}
	
	.page {
		margin-top: 10px;
		float: right;
	}
	
	.user-right-table {
		margin-top: 26px;
	}
	
	.power {
		margin: 10px 0 10px 13px;
	}
	
	.user-name {
		margin-left: 13px;
	}
	
	.user-power {
		height: 300px;
		border: 1px solid #ddd;
	}
	
	.power-tree {
		height: 298px;
		border-right: 1px solid #eee;
	}
</style>
<template>
	<div class="user-context">
		<Row :gutter="15">
			<Col span="4">
			<div class="user-header">
				<span>{{userPageLabal[0].fcn}}</span>
			</div>
			<div class="user-tree">
				<Tree :data="baseData" @on-select-change="choesDepNodes"></Tree>
			</div>
			</Col>
			<Col span="20">
			<div class="user-right-context">
				<div class="user-right-header">
					<div class="user-search">
						<span>{{userPageLabal[2].fcn}}</span>
						<Input class="user-loginname" v-model="PloginName"></Input>
						<Button type="primary">新增</Button>
						<Button type="primary" @search="getUserBysearch">查询</Button>
					</div>
				</div>
				<div class="user-right-table">
					<tablePage :list="lists" v-on:goto="goto" class="table-page"></tablePage>
					<Table :columns="columns1" :data="userData" class="user-table"></Table>
					<Page :total="total" show-total class="page"></Page>
				</div>
			</div>
			</Col>
		</Row>
		<Modal v-model="userModal" width="600" :mask-closable="false">
			<p slot="header">
				<span>{{userPageModal[0].fcn}}</span>
			</p>
			<div>
				<Tabs type="card">
					<Tab-pane :label="userPageModal[1].fcn">
						<span class="user-name">	{{userPageModal[3].fcn}}</span>
						<Input style="width: 200px;"></Input>
						<div class="power">
							<span>{{userPageModal[4].fcn}}<i-switch>
      			  <span slot="open">开</span>
							<span slot="close">关</span>
							</i-switch>
							</span>
							<span style="margin-left: 25px;">{{userPageModal[5].fcn}}<i-switch>
    				  <span slot="open">开</span>
							<span slot="close">关</span>
							</i-switch>
							</span>
							<span style="margin-left: 25px;">{{userPageModal[6].fcn}}<i-switch>
       				 <span slot="open">开</span>
							<span slot="close">关</span>
							</i-switch>
							</span>
						</div>
						<div>
							<Row>
								<Col span="3"> {{userPageModal[7].fcn}}
								</Col>
								<Col span="21">
								<Checkbox-group>
									<Checkbox label="香蕉"></Checkbox>
									<Checkbox label="苹果"></Checkbox>
									<Checkbox label="西瓜"></Checkbox>
									<Checkbox label="香蕉"></Checkbox>
									<Checkbox label="苹果"></Checkbox>
									<Checkbox label="西瓜"></Checkbox>
									<Checkbox label="香蕉"></Checkbox>
									<Checkbox label="苹果"></Checkbox>
									<Checkbox label="西瓜"></Checkbox>
									<Checkbox label="香蕉"></Checkbox>
									<Checkbox label="苹果"></Checkbox>
									<Checkbox label="西瓜"></Checkbox>
									<Checkbox label="苹果"></Checkbox>
									<Checkbox label="西瓜"></Checkbox>
								</Checkbox-group>
								</Col>
							</Row>
						</div>
					</Tab-pane>
					<Tab-pane :label="userPageModal[2].fcn">
						<Row>
							<div class="user-power">
								<Col span="12" class="power-tree">
								<Tree :data="dataPower" show-checkbox @on-check-change="dataPowe"></Tree>
								</Col>
								<Col span="12">
								<div>
									<Tag closable>标签三</Tag>
									<Tag closable>标签三</Tag>
									<Tag closable>标签三</Tag>
									<Tag closable>标签三</Tag>
									<Tag closable>标签三</Tag>
									<Tag closable>标签三</Tag>
								</div>
								</Col>
							</div>
						</Row>
					</Tab-pane>
				</Tabs>
			</div>
			<div slot="footer">
				<Button type="primary"> 取消</Button>
				<Button type="primary">确认</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import tablePage from '../../components/tablePage.vue';
	export default {
		components: {
			tablePage,
		},
		data() {
			return {
				state:null,
				pageSize: 10,
				total: 0,
				PloginName: null,
				userModal: false,
				depID: null,
				//table page  child component
				lists: [{
					totalsize: 50,
					current: 1,
					allpage: 13
				}],
				//userPageModal
				userPageModal: [{
					fcn: '编辑用户'
				}, {
					fcn: '用户权限'
				}, {
					fcn: '数据权限'
				}, {
					fcn: '登录名：'
				}, {
					fcn: '审批权：'
				}, {
					fcn: '消息接收权：'
				}, {
					fcn: '文电收发权：'
				}, {
					fcn: '角色分配：'
				}],
				//goodEqPageLabal
				userPageLabal: [{
					fcn: '组织单位'
				}, {
					fcn: '姓名：'
				}, {
					fcn: '登录名：'
				}],
				baseData: [{
					expand: true,
					title: 'parent 1',
					children: [{
						title: 'parent 1-0',
						expand: true,
						disabled: true,
						children: [{
							title: 'leaf',
							disableCheckbox: true
						}, {
							title: 'leaf',
						}]
					}, {
						title: 'parent 1-1',
						expand: true,
						checked: true,
						children: [{
							title: 'leaf',
						}]
					}]
				}],
				dataPower: [{
					expand: true,
					title: 'parent 1',
					children: [{
						title: 'parent 1-0',
						expand: true,
						children: [{
							title: 'leaf',
						}, {
							title: 'leaf',
						}]
					}, {
						title: 'parent 1-1',
						expand: true,
						children: [{
							title: 'leaf',
						}]
					}]
				}],
				columns1: [{
						title: '序号',
						key: 'name'
					},
					{
						title: '用户名',
						key: 'age'
					},
					{
						title: '用户单位',
						key: 'address'
					},
					{
						title: '登录IP',
						key: 'address'
					},
					{
						title: '登录次数',
						key: 'address'
					},
					{
						title: '数据权限',
						key: 'address'
					}, {
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.onOff(params)
										}
									}
								}, '启用'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									on: {
										click: () => {
											this.userEdit(params)
										}
									}
								}, '编辑')
							]);
						}
					}
				],
				userData: [{
						name: '王小明',
						age: 18,
						address: '北京市朝阳区芍药居'
					},
					{
						name: '张小刚',
						age: 25,
						address: '北京市海淀区西二旗'
					},
					{
						name: '李小红',
						age: 30,
						address: '上海市浦东新区世纪大道'
					},
					{
						name: '周小伟',
						age: 26,
						address: '深圳市南山区深南大道'
					}
				],
			}
		},
		methods: {
			//分页请求ajax  table page  child component
			goto: function(index) {
				console.info('parent' + index)
			},
			userEdit(pararm) {
				this.userModal = true;
				console.log(pararm)
			},
			onOff(pararm) {
				console.log(pararm)
			},
			dataPowe(data) {
				console.log(data)
			},
			//获取单位树
			getDepTree() {
				this.$http.get(this.url + 'deptment/select/all').then(response => {
					let isOk = response.data;
					//console.info(isOk.obj)
					if(isOk.success) {
						console.log(isOk.obj)
						this.getGoodsTreeList(isOk.obj);
					} else {
						this.$Message.error(isOk.msg);
					}

				}, response => {

				});
			},
			//整理后台数据
			getGoodsTreeList: function(datas) {
				this.baseData = [];
				for(var i = 0; i < datas.length; i++) {
					this.baseData.push(this.getGoodsTreeChilds(datas, datas[i]));
				}
				console.log(this.baseData)
			},
			getGoodsTreeChilds: function(datas, data) {
				var obj = new Object;
				obj.title = data.fname;
				obj.fno = parseInt(data.fno);
				obj.fparentno = parseInt(data.fparentno);

				obj.children = [];
				for(let i = 0; i < datas.length; i++) {
					if(data.fno == datas[i].fparentno) {
						obj.children.push(this.getGoodsTreeChilds(datas, datas[i]));
					}
				}
				if(obj.children.length == 0) {
					delete obj.children
				}
				return obj;

			},
			// chose node get value
			choesDepNodes(param) {
				this.depID = param[0].fno;
				console.log(param);
			}, // 根据 条件查询
			getUserBysearch() {
				let param = {
					state :this.state,
					depno :this.depID,
					pageCurrent:this.lists[0].current,
					pageSize:this.pageSize,
					userName : this.PloginName
				}
				this.$http.post(this.url + 'user/select', param).then(response => {
					let isOk = response.data;
					if(isOk.success) {
							console.log("isOk.obj")
						console.log(isOk.obj)
//						this.total=isOk.obj.
//   				this.userData=isOk.obj.items;
					} else {
						this.$Message.error(isOk.msg);
					}

				}, response => {

				}); 
			}
		},
		mounted() {
			this.getDepTree();
			this.getUserBysearch();
		}
	}
</script>

<style>

</style>